<template>
  <a-card class="sub-content__body" :bordered="false">
    <div class="table-search-page-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="24">
            <a-form-item label="事项名称">
              <a-input
                v-model="queryParam.itemName"
                placeholder="请输入事项名称"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="统计项">
              <a-select
                v-decorator="['select']"
                placeholder="请选择"
                style="width: 120px"
                @change="onSelectButtonChange"
              >
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">进行中</a-select-option>
                <a-select-option value="2">通过</a-select-option>
                <a-select-option value="3">已驳回</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="业务类型">
              <a-radio-group
                v-model="queryParam.serviceType"
                @change="onRadioChange"
              >
                <a-radio value="0">全部</a-radio>
                <a-radio value="1">查询类</a-radio>
                <a-radio value="2">办理类</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="业务系统名称">
              <a-input
                v-model="queryParam.serviceName"
                placeholder="请输入业务系统名称"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="统计时间">
              <a-date-picker placeholder="请选择统计时间"></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                style="margin-right: 8px"
                >查询
              </a-button>
              <a-button>导出表格</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="show-table">
      <a-table
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        :columns="columns"
        :data-source="data"
        :bordered="false"
        :pagination="{
          showQuickJumper: true,
          onChange: onPageChange,
          total: data.length
        }"
      >
        <template
          v-for="col in ['name', 'age', 'address', 'status']"
          :slot="col"
          slot-scope="text, record"
        >
          <div :key="col">
            <a-input
              v-if="record.editable"
              style="margin: -5px 0"
              :value="text"
              @change="e => handleChange(e.target.value, record.key, col)"
            />
            <template v-else>{{ text }}</template>
          </div>
        </template>
        <span slot="operation" slot-scope="text, record">
          <template>
            <div class="editable-row-operations" style="display:inline-block">
              <span v-if="record.editable">
                <a @click="() => save(record.key)">保存</a>
                <a-popconfirm
                  title="Sure to cancel?"
                  @confirm="() => cancel(record.key)"
                >
                  <a-divider type="vertical" />
                  <a style="margin-left:8px">取消</a>
                </a-popconfirm>
              </span>
              <span v-else>
                <a @click="() => edit(record.key)">编辑</a>
                <a-divider type="vertical" />
                <a-popconfirm
                  v-if="data.length"
                  title="Sure to delete?"
                  @confirm="() => onDelete(record.key)"
                >
                  <a href="javascript:;" style="margin-left:8px">删除</a>
                </a-popconfirm>
              </span>
            </div>
          </template>
        </span>
      </a-table>
    </div>
    <div></div>
  </a-card>
</template>

<script>
const columns = [
  {
    title: '名字',
    dataIndex: 'name',
    width: '25%',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '年龄',
    dataIndex: 'age',
    width: '15%',
    scopedSlots: { customRender: 'age' },
    sorter: (a, b) => a.age - b.age
  },
  {
    title: '地址',
    dataIndex: 'address',
    width: '20%',
    scopedSlots: { customRender: 'address' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: '20%',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

const data = []
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32 + i,
    address: `London Park no. ${i}`,
    status: 'processing'
  })
}
export default {
  name: 'TableList',
  data() {
    this.cacheData = data.map(item => ({ ...item }))
    return {
      columns,
      data,
      selectedRowKeys: [],
      queryParam: {
        itemName: '',
        status: '',
        serviceType: '',
        serviceName: ''
        // countDate:
      }
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  methods: {
    onSelectButtonChange(value) {
      console.log('countItem:', value)
    },
    onRadioChange() {
      console.log('serviceType:', this.queryParam.serviceType)
    },
    handleChange(value, key, column) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target[column] = value
        this.data = newData
      }
    },
    edit(key) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target.editable = true
        this.data = newData
      }
    },
    save(key) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        delete target.editable
        this.data = newData
        this.cacheData = newData.map(item => ({ ...item }))
      }
    },
    cancel(key) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter(item => key === item.key)[0]
        )
        delete target.editable
        this.data = newData
      }
    },
    onDelete(key) {
      const data = [...this.data]
      this.data = data.filter(item => item.key !== key)
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    onPageChange(pageNumber) {
      console.log('Page: ', pageNumber)
    }
  }
}
</script>

<style lang="scss" scoped>
.cardLayout {
  margin: 24px 16px;
  background: #fff;
  min-height: 280px;
  border-radius: 5px;
  border: #fff;
}
.show-table {
  margin-top: 20px;
}
.editable-row-operations a {
  margin-right: 8px;
  display: inline-block;
}
.delete-row-operations a {
  margin-left: 8px;
  display: inline-block;
}
</style>
